/* *
* 装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许在运行时动态地给对象增加职责，并能够保持对象的原始接口不变。
* 在前端开发中，装饰器模式常被用于增强现有的组件、模块或者类，同时也可以用来组合多个对象，构建出更加复杂的系统。
* */

//? 原始样式
class Input {
    constructor() {
        this.name = 'Input';
    }
    render() {
        return `<input type="text" />`;
    }
}
//? 用装饰器给输入框组件增加边框样式
function withBorder(component) {
    class WithBorder extends component {
        constructor() {
            super();
            this.name = 'WithBorder';
        }
        render() {
            return `
        <div style="border: 1px solid black;">
        <!--? 父类的-->
          ${super.render()}
        </div>
      `;
        }
    }
    return WithBorder;
}
//? 用装饰器给输入框组件增加背景色样式
function withBackgroundColor(component) {
    class WithBackgroundColor extends component {
        constructor() {
            super();
            this.name = 'WithBackgroundColor';
        }
        render() {
            return `
        <div style="background-color: #f8f8f8;">
        <!--? 父类的-->
          ${super.render()}
        </div>
      `;
        }
    }
    return WithBackgroundColor;
}
//? 使用装饰器来增强输入框组件
const EnhancedInput = withBorder(withBackgroundColor(Input));
const input = new EnhancedInput();
console.log(input.render()); // 输出： <div style="border: 1px solid black;"><div style="background-color: #f8f8f8;"><input type="text" /></div></div>
